<template>
	<view class="pagesbg">
		
		<view class="operateBox">
			<view class="operateBox-bg">
				<image src="@/static/public/bg.png" mode=""></image>
			</view>
			<view class="operateBox-tabs">
				<view class="operateBox-headerTitle">欢迎注册</view>
				<view class="operateBox-formBox">
					<view class="operateBox-blackBox">
						<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 0, showCloseBtn: phone != '' }">
							<input type="text" placeholder="请输入账号" placeholder-class="inputStyle" v-model="phone"
							@blur="blurInput(0)"
							@focus="focusInput(0)"/>
							<view class="operateBox-formBox-list-image">
								<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('phone')">
									<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="operateBox-blackBox">
						<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 1, showCloseBtn: password != '' }">
							<input placeholder="请输入密码" placeholder-class="inputStyle" v-model="password"
							:password="!eyeShowHideArray[1].show"
							@blur="blurInput(1)"
							@focus="focusInput(1)"/>
							<view class="operateBox-formBox-list-image">
								<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('password')">
									<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
								</view>
								<view class="operateBox-formBox-list-image__see" @click="toggleEyeStatus(1)">
									<image :src="eyeShowHideArray[1].show ? eyeShow : eyeHide" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="operateBox-blackBox">
						<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 2, showCloseBtn: re_password != '' }">
							<input placeholder="请再次输入密码" placeholder-class="inputStyle" v-model="re_password"
							:password="!eyeShowHideArray[2].show"
							@blur="blurInput(2)"
							@focus="focusInput(2)"/>
							<view class="operateBox-formBox-list-image">
								<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('re_password')">
									<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
								</view>
								<view class="operateBox-formBox-list-image__see" @click="toggleEyeStatus(2)">
									<image :src="eyeShowHideArray[2].show ? eyeShow : eyeHide" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="operateBox-btn--m">
					<view class="operateBox-btn-chioce" @tap.stop="confirm()">注册</view>
				</view>
				
				<view class="operateBox-flexBeTtile">
					已有账号
					<view class="operateBox-beTtile" @tap.stop="$tools.jump('./login')"> 马上登录</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import md5 from '../../common/js/md5.js';
	export default {
		components:{
		},
		data(){
			return{
				phone: '',
				password: '',
				re_password: '',
				toggle: true,
				isFocus: null,
				eyeShow: '../../static/public/icon-eye-open.png',
				eyeHide: '../../static/public/icon-eye-close.png',
				eyeShowHideArray: [{ show: false }, { show: false }, { show: false }],
			}
		},
		onLoad() {
			
		},
		onShow() {
		},
		methods: {
			confirm(){
				if (this.phone == '' ) {
					return this.$tools.toast('请输入账号');
				}
				if (this.phone.length < 6 || this.phone.length > 16) {
					return this.$tools.toast('账号长度为6-16位');
				}
				if (this.password == '' ) {
					return this.$tools.toast('请输入密码');
				}
				var reg = /^(?![0-7]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
				if(!reg.test(this.password)){
					return this.$tools.toast('请输入6-12位字母+数字的密码');
				}
				if (this.re_password == '' ) {
					return this.$tools.toast('请再次输入密码');
				}
				if (this.re_password != this.password ) {
					return this.$tools.toast('两次密码不一致');
				}
				if(this.toggle){
					this.toggle = false;
					var data = {};
					data['sys_user_account'] = this.phone;
					data['login_password'] = this.$md5(this.password);
					console.log("data：",data);
					this.$Ajax('/api/user/login/userRegister',data,res => {
							this.toggle = true;
							if (res.success) {
								this.$tools.toastJump('注册成功', './login');
							} else {
								this.$tools.toast(res.msg);
							}
						},err =>{
							this.toggle = true;
						}
					);
				}
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			toggleEyeStatus(index) {
				this.eyeShowHideArray[index].show = !this.eyeShowHideArray[index].show;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/pages/operate/register';
	.inputStyle{
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3080D3;
	}
	
</style>